<app-scrollspy-nav-layout [headings]="headings">
  <h1>Plugins</h1>

  <section>
    <h2 id="emoji">Emoji plugin</h2>

    <markdown ngPreserveWhitespaces>
      #### Emoji-Toolkit file to include
      ```javascript
      node_modules/emoji-toolkit/lib/js/joypixels.min.js
      ```
      #### Directive
      `emoji` - activate emoji plugin
      ### Example
    </markdown>

    <markdown>
      Using `emoji` input property on `markdown` component or directive (this is not available when using pipe or service) allows you to convert shortnames to native unicode emojis.
    </markdown>

    <markdown [src]="'app/plugins/remote/emoji.html'"></markdown>

    <markdown>
      The example below illustrate `emoji` directive in action.
    </markdown>

    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px">
      <mat-form-field appearance="fill" color="accent" fxFlex.gt-sm="calc(50% - 8px)">
        <textarea matInput [(ngModel)]="emojiMarkdown"></textarea>
      </mat-form-field>

      <markdown [data]="emojiMarkdown" emoji fxFlex.gt-sm="calc(50% - 8px)"></markdown>
    </div>

    <markdown emoji>
      > :blue_book: You can refer to this [Emoji Cheat Sheet](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md) for a complete list of _shortnames_.
    </markdown>
  </section>

  <section>
    <h2 id="line-numbers">Line Numbers plugin</h2>

    <markdown ngPreserveWhitespaces>
      #### Prism files to include
      ```javascript
      node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css
      node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js
      ```
      #### Directive
      `lineNumbers` - activate line numbers plugin
      #### Attributes
      `start` - offset number for the first display line
      ### Example
    </markdown>

    <markdown>
      Using `lineNumbers` input property on `markdown` component or directive (this is not available when using pipe or service) allows you to add line number at the beginning of each lines of code block.
    </markdown>

    <markdown [src]="'app/plugins/remote/line-numbers.html'"></markdown>

    <markdown>
      The example below uses `lineNumbers` directive which uses default line offset of 1.
    </markdown>

    <markdown lineNumbers ngPreserveWhitespaces>
      ```javascript
      var result = square(2);

      function square(number) &#123;
        return number * number;
      }
      ```
    </markdown>

    <markdown>
      Optionally you can use `start` to specify the offset number for the first display line.
    </markdown>

    <markdown>
      In the example below line offset is set to 5 using `start` input property.
    </markdown>

    <markdown lineNumbers [start]="5" ngPreserveWhitespaces>
      ```javascript
      var result = root(2);

      function root(x, n) &#123;
        try &#123;
          var negate = n % 2 == 1 && x < 0;
          if(negate)
            x = -x;
          var possible = Math.pow(x, 1 / n);
          n = Math.pow(possible, n);
          if(Math.abs(x - n) < 1 && (x > 0 == n > 0))
            return negate ? -possible : possible;
        } catch(e)&#123; }
      }
      ```
    </markdown>
  </section>

  <section>
    <h2 id="line-highlight">Line Highlight plugin</h2>

    <markdown ngPreserveWhitespaces>
      #### Prism files to include
      ```javascript
      node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css
      node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js
      ```
      #### Directive
      `lineHighlight` - activate line highlight plugin
      #### Attributes
      `line` - lines to highlight (i.e.: 6, 11-15)<br>
      `lineOffset` - starting offset for line numbers
      ### Example
    </markdown>

    <markdown ngPreserveWhitespaces>
      You can highlight different lines by adding `lineHighlight` directive on the `markdown` component/directive.

      Use `line` input property to specify the line(s) to highlight and optionally there is a `lineOffset` property to specify the starting line of code your snippet represents.
    </markdown>

    <markdown [src]="'app/plugins/remote/line-highlight.html'"></markdown>

    <markdown>
      In the example below `line` 6 and 10 to 16 are highlight using a `lineOffset` of 5.
    </markdown>

    <markdown lineHighlight [line]="'6, 10-16'" [lineOffset]="5" ngPreserveWhitespaces>
      ```javascript
      var result = root(2);

      function root(x, n) &#123;
        try &#123;
          var negate = n % 2 == 1 && x < 0;
          if(negate)
            x = -x;
          var possible = Math.pow(x, 1 / n);
          n = Math.pow(possible, n);
          if(Math.abs(x - n) < 1 && (x > 0 == n > 0))
            return negate ? -possible : possible;
        } catch(e)&#123; }
      }
      ```
    </markdown>
  </section>

  <section>
    <h2 id="katex">KaTeX plugin</h2>

    <markdown ngPreserveWhitespaces>
      #### KaTeX files to include
      ```javascript
      node_modules/katex/dist/katex.min.css
      node_modules/katex/dist/katex.min.js
      ```
      #### Directive
      `katex` - activate KaTeX plugin
      #### Attributes
      `katexOptions` - math rendering [options](https://katex.org/docs/options.html)<br>
      ### Example
    </markdown>

    <markdown>
      You can render KaTex expression by adding `katex` directive on the `markdown` component/directive.
    </markdown>

    <markdown [src]="'app/plugins/remote/katex.html'"></markdown>

    <markdown>
      The example below illustrate `katex` directive in action.
    </markdown>

    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px">
      <mat-form-field appearance="fill" color="accent" fxFlex.gt-sm="calc(50% - 8px)">
        <textarea matInput [(ngModel)]="katexMarkdown"></textarea>
      </mat-form-field>

      <markdown [data]="katexMarkdown" katex fxFlex.gt-sm="calc(50% - 8px)"></markdown>
    </div>

    <markdown ngPreserveWhitespaces>
      Optionally, you can specify math rendering [options](https://katex.org/docs/options.html) using `katexOptions` property.

      **example.component.ts**
      ```typescript
      import &#123; KatexOptions } from 'ngx-markdown';

      public options: KatexOptions = &#123;
        displayMode: true,
        throwOnError: false,
        errorColor: '#cc0000',
        ...
      };
      ```

      **example.component.html**
    </markdown>

    <markdown [src]="'app/plugins/remote/katex-options.html'"></markdown>
  </section>
</app-scrollspy-nav-layout>